<template>
  <main class="main-wrapper">
    <aside>
      <ul>
        <li>
          <router-link to="/main/list">唱片列表</router-link>
        </li>
        <li>
          <router-link to="/main/detail">唱片详情</router-link>
        </li>
      </ul>
    </aside>
    <div class="content"> 
      <!-- 在哪切换在哪放router-view -->
      <router-view />
    </div>
  </main>
</template>

<script>
  export default {
     data(){
      return {

      }
    }
  }
</script>

<style lang="sass" scoped>
.main-wrapper
  display: flex
  min-height: calc( 100vh - 106px )
  border-top: 1px solid #666
  aside
    flex: 0 0 150px
    background: #f0f0f0
    a
      display: block
      text-decoration: none
      line-height: 40px
      background: #f9f9f9
      color: #ccc
      &.router-link-active
        background: #333
  .content
    flex:1
</style>
